<template>
  <el-dialog
    title="新增会议"
    :visible.sync="dialogVisible"
    width="40%"
    append-to-body
    :close-on-click-modal="false"
    :before-close="handleClose">
    <el-form ref="ruleForm" :model="ruleForm" label-width="115px" :rules="rules" class="demo-ruleForm dialog-demo-ruleForm">
      <el-row>
        <el-col :span="24">
          <el-form-item label="会议主题:" prop="subject">
            <el-input clearable size="small" v-model="ruleForm.subject"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="会议开始时间:" prop="startTime">
            <el-date-picker
              v-model="ruleForm.startTime"
              type="datetime"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              size="small"
              placeholder="选择开始时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会议结束时间:" prop="endTime">
            <el-date-picker
              v-model="ruleForm.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
              size="small"
              placeholder="选择结束时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="安全:" prop="">
            <el-checkbox v-model="ruleForm.isPassword">入会密码</el-checkbox>
            <el-checkbox v-model="ruleForm.isWaitingRoom">开启等候室</el-checkbox>
            <el-checkbox v-model="ruleForm.isInnerEnter">仅企业内部用户可入</el-checkbox>
            <el-checkbox v-model="ruleForm.isAllowPreEnter">允许成员在主持人进会前加入会议</el-checkbox>
            <el-checkbox v-model="ruleForm.isHostKey">主持人密钥</el-checkbox>
            <el-checkbox v-model="ruleForm.isWatermark">开启会议水印</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12" v-if="ruleForm.isPassword">
          <el-form-item label="入会密码">
            <el-input type="number" size="small" v-model.number="ruleForm.password" v-if="ruleForm.isPassword"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.isHostKey">
          <el-form-item label="主持人密钥">
            <el-input size="small" v-model.number="ruleForm.hostKey" type="number" v-if="ruleForm.isHostKey"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="ruleForm.isWatermark">
        <el-col :span="24">
          <el-form-item label="会议水印:" prop="waterMarkType">
            <el-radio-group v-model="ruleForm.waterMarkType">
              <el-radio :label="0">单排</el-radio>
              <el-radio :label="1">多排 </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="成员入会时静音:" prop="muteEnableTypeJoin">
            <el-radio-group v-model="ruleForm.muteEnableTypeJoin">
              <el-radio :label="0">开启</el-radio>
              <el-radio :label="1">关闭 </el-radio>
              <el-radio :label="2">超过6人后自动开启	</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="录制:" prop="isRecording">
            <el-checkbox v-model="ruleForm.isRecording">自动录制</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="文档:" prop="isUploadDoc">
            <el-checkbox v-model="ruleForm.isUploadDoc">允许成员上传文档</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="报名:" prop="isEnroll">
            <el-checkbox v-model="ruleForm.isEnroll">成员需要报名入会</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form ref="form" :model="form" label-width="115px" :inline="true" class="demo-ruleForm dialog-demo-ruleForm form-class">
      <el-form-item label="">
        <el-form-item label="用户名称:">
          <el-input clearable v-model="form.userName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="用户区域:">
          <el-cascader
            v-model="form.adcode"
            :options="areaOptions"
            :props="{ checkStrictly: true,label:'label' ,value:'id'}"
            size="small"
            clearable></el-cascader>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" size="small" @click="getListUser">筛选</el-button>
          <el-button size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form-item>
    </el-form>
    <el-table
      class="table"
      :header-cell-style="{
        textAlign: 'center',
        color: '#A3B3BE',
        fontSize: '0.78125vw',
      }"
      :cell-style="{
        textAlign: 'center',
        fontSize: '0.78125vw',
        color: '#fff',
      }"
      @selection-change="handleSelectionChange"
      :data="tableData"
      :row-key="getRowKey"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        :selectable="selectable"
        :reserve-selection="true"
        width="55">
      </el-table-column>
      <el-table-column label="用户名称" align="center" key="userName" prop="userName"  :show-overflow-tooltip="true" />
      <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName"  :show-overflow-tooltip="true" />
      <el-table-column label="行政区划" align="center" key="adcode" prop="area.areaName" :show-overflow-tooltip="true" />
      <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber"  width="120" />
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="small">取 消</el-button>
      <el-button type="primary" @click="save" size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as API from '../../../../api/user'
import { getInfo } from '@/utils/auth'
export default {
  props: {
    isShowDialog: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      userIds: null,
      multipleSelection: [],
      areaOptions: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      dialogVisible: this.isShowDialog.addConferenceVisible,
      form: {},
      ruleForm: {
        subject: null,
        startTime: null,
        endTime: null,
        isWaitingRoom: true,
        isAllowPreEnter: true,
        isWatermark: true,
        waterMarkType: 1,
        muteEnableTypeJoin: 2,
        isUploadDoc: true
      },
      rules: {
        subject: [
          { required: true, message: '请输入会议主题', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择会议开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择会议开始时间', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.getListUser()
    this.getAreaTreeselect()
    console.log(getInfo())
    this.userIds = JSON.parse(getInfo()).user.userId
  },
  methods: {
    getRowKey(row) {
      return row.userId
    },
    getAreaTreeselect() {
      API.areaTreeSelect().then(response => {
        this.areaOptions = response.data
      })
    },
    reset() {
      this.form = {}
    },
    getListUser() {
      this.form.adcode = this.form.adcode && this.form.adcode.length > 0 ? this.form.adcode[this.form.adcode.length - 1] : null
      const params = {
        ...this.form,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      API.listUser(params).then(res => {
        if (res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
    },
    handleClose() {
      this.$emit('closeConference')
    },
    save() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if(Date.parse(this.ruleForm.endTime) < Date.parse(this.ruleForm.startTime)){
            return this.$message.error('结束时间不能小于开始时间!!!')
          }
          var qqPattern = /^[0-9]{4,6}$/
          var qqPattern1 = /^[0-9]{6}$/
          if (this.ruleForm.isPassword && !this.ruleForm.password) {
            return this.$message.warning('请输入会议密码！')
          }
          if (this.ruleForm.isHostKey && !this.ruleForm.hostKey) {
            return this.$message.warning('请输入密钥！')
          }
          if (this.ruleForm.isPassword && this.ruleForm.password) {
            if (!qqPattern.test(this.ruleForm.password)) {
              return this.$message.error('请输入4-6位正整数会议密码!')
            }
          }
          if (this.ruleForm.isHostKey && this.ruleForm.hostKey) {
            if (!qqPattern1.test(this.ruleForm.hostKey)) {
              return this.$message.error('请输入6位正整数密钥！')
            }
          }
          const participants = []
          this.multipleSelection.forEach(item => {
            participants.push({
              nickName: item.nickName,
              userId: item.userId,
              username: item.userName
            })
          })
          const data = {
            ...this.ruleForm,
            participants
          }
          API.meetingCreate(data).then(res => {
            if (res.code === 200) {
              this.handleClose()
            }
          })
        }
      })
    },
    handleSelectionChange(val) {
      if (val[0].userId === this.userIds) {
        return false
      }
      this.multipleSelection = val
    },
    selectable(row, index) {
      if (row.userId === this.userIds) {
        return false
      } else {
        return true
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.currentPage = 1
      this.getListUser()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getListUser()
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-demo-ruleForm{
  :deep(.el-form-item){
    // width: 90%;
    .el-select{
      width: 100%;
    }
    .el-form-item__label{
      color: rgba(163, 179, 190, 1);
    }
    .el-date-editor{
      width: 100%;
    }
    .el-checkbox__label,.el-radio__label{
      color: rgba(163, 179, 190, 1);
    }
    .el-input__inner{
      background: rgba(255, 255, 255, 0.1);
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 1);
    }
  }
  .img{
    width: 28px;
    height: 28px;
    vertical-align: middle;
    cursor: pointer;
  }
}
.form-class{
  :deep(.el-form-item) {
    .el-form-item__content{
      display: flex;
      align-items: center;
      .el-form-item{
        display: flex;
        .el-form-item__label{
          width: auto !important;
        }
        .el-form-item__content{
          width: 55%;
        }
      }
    }
  }
}
:deep(.el-dialog){
  background: rgba(3,27,54,0.7);
}
:deep(.el-dialog__title){
  color: #fff;
}
:deep(.el-textarea__inner){
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-family: none;
}
.canhuiren{
  display: flex;
  .changeCss{
    display: flex;
    span{
      width: 1.2rem;
      display: inline-block;
    }
  }
}

/*最外层透明*/
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: transparent;
}
/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  color: #c9e9ff;
  height: 30px;
}
:deep(.el-table thead) {
  color: #7ec1ff;
  font-size: 14px;
}
:deep(.el-table--enable-row-hover) {
  background-color: transparent;
}
:deep(.el-table .warning-row) {
  background: rgba(51, 91, 127, 0.6);
}
:deep(.el-table) {
  --el-table-border-color: rgba(51, 91, 127, 0.6) !important;
}
:deep(.el-table tbody tr:hover > td) {
  background: rgba(51, 91, 127, 0.4) !important;
}
:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: none;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  display: none;
}
:deep(.el-pager li) {
  background: none;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(76, 154, 216, 1),
      rgba(5, 84, 166, 1),
      rgba(77, 155, 217, 1)
    )
    1 1;
  color: #fff;
}
:deep(.el-pagination button:disabled) {
  background: linear-gradient(180deg, rgba(3, 74, 174, 0.2) 0%, #034aae 100%);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(76, 154, 216, 1),
      rgba(5, 84, 166, 1),
      rgba(77, 155, 217, 1)
    )
    1 1;
  color: #fff;
}
:deep(.el-pagination .btn-next),
:deep(.el-pagination .btn-prev) {
  background: linear-gradient(180deg, rgba(9, 102, 169, 0.2) 0%, #0965a8 100%);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(111, 222, 252, 1),
      rgba(1, 124, 202, 1),
      rgba(103, 214, 247, 1)
    )
    1 1;
  color: #fff;
}
:deep(.el-pager li.active) {
  background: linear-gradient(180deg, rgba(9, 102, 169, 0.2) 0%, #0965a8 100%);
}
:deep(.el-pagination__jump) {
  color: #fff;
}
:deep(.el-pagination__total){
  color: #fff;
}
</style>
